<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=500" />
	<meta name="keywords" content="ScrollMagic, example, scrolling, attaching, scrollbar, responsive, duration, update, on-the-fly" />
	<meta name="author"	content="Jan Paepke (www.janpaepke.de)" />
	<title>Responsive Duration - Examples - ScrollMagic</title>

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="../../assets/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/style.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/examples.css" type="text/css">
	<link rel="shortcut icon" href="../../assets/img/favicon.ico" type="image/x-icon">

	<script type="text/javascript" src="../../assets/js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/highlight.pack.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/modernizr.custom.min.js"></script>
	<script type="text/javascript" src="../../assets/js/examples.js"></script>
	
	<script type="text/javascript" src="../../assets/js/lib/gsap3/gsap.min.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/ScrollMagic.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
</head>
<body>
	<ul id="menu"></ul>
	<div id="content-wrapper">
		<div id="example-wrapper">
			<div class="scrollContent">
				<section id="titlechart">
					<div id="description">
						<h1 class="badge gsap">Callback Duration</h1>
						<h2>Use a function returning a scene's duration.</h2>
						<p>
							In certain cases a scene's duration is subject to frequent change – for example when it depends on user input, like in the scene below.
						</p>
						<p>
							Sure, you could update the respective scene's duration whenever that value changes, but this will get confusing when multiple scenes depend on the same value.
						</p>
						<p>
							For these cases ScrollMagic offers the possibility to supply a callback function as the duration. It is very important that this callback executes <b>FAST</b> as it will get called <b>a lot</b>. So if you need to retreive things like element positions or sizes (that take time to calculate), make sure to cache them in a separate variable and make the callback return it.
						</p>
						<p>
							On this page you can see how to use this technique to have the duration be dependent on the vertical mouse position within the viewport. Move the mouse up and down to see the duration change accordingly.
						</p>
						<a href="#" class="viewsource">view source</a>
					</div>
				</section>
				<section class="demo" style="perspective: 300px">
					<div class="spacer s1"></div>
					<div class="spacer s1" id="trigger"></div>
					<div class="spacer s0"></div>
					<div id="animate" class="box1 blue">
						<p>Da Flippity Flop</p>
						<a href="#" class="viewsource">view source</a>
					</div>
					<div class="spacer s2"></div>
					<script>
						// make a variable to store the mouse pos.
						var mouseTopPerc = 0;
						// function to be used to retrieve variable
						function getMousePos() {
							return (mouseTopPerc * 400) + 10;
						}
						// update variable on mouse move
						$("body").on("mousemove", function (e) {
							mouseTopPerc = e.clientY/$(this).innerHeight();
						});							

						// init controller
						var controller = new ScrollMagic.Controller();

						// build tween
						var tween = TweenMax.to("#animate", 0.5, {rotationY: 180});

						// build scene and supply getMousePos function as duration
						var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: getMousePos})
										.setTween(tween)
										.addIndicators() // add indicators (requires plugin)
										.addTo(controller);
					</script>
				</section>
				<div class="spacer s_viewport"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../assets/js/tracking.js"></script>
</body>
</html>
